<template>
  <div>
    <div>
      <div>
        <!-- <img style="width: 100%;overflow: hidden;" src="./../../../static/image/backgroundimg.png" /> -->
        <img style="width: 100%;overflow: hidden;" src="https://yuhuaxia.oss-cn-shanghai.aliyuncs.com/img/backgroundimg.png" />
      </div>
      <div>
        <div style="font-size: 70px;" class="nav-h1">量化交易策略研究</div>
      </div>
    </div>
    <!--策略研究平台-->
    <div class="strategy" style="width:100%;">
      <h2 style="text-align: center;font-weight: bold; color:#3F4A57;margin-top: 50px;">策略精选</h2>
      <div style="width:100%;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;">
        <div style="display: flex;flex-wrap: wrap;width: 100%;justify-content: center;">
          <div  v-for="item in selectionStrategyData" :key="item.testrecord.id"  class="schart" >
            <div style="display:flex;flex-direction:column;">
              <div style="display:flex;flex-direction:row;margin-left:40px;">
                  <div v-if="item.rank === 1" class="rank" style="background:red;">{{item.rank}}</div>
                  <div v-if="item.rank === 2" class="rank" style="background:#fb8341;">{{item.rank}}</div>
                  <div v-if="item.rank === 3" class="rank" style="background:#e8c55b;">{{item.rank}}</div>
                  <div v-if="item.rank > 3" class="rank" style="background:#a8bedc;">{{item.rank}}</div>
                  <div class="title_p contentmore" @click="gotoStrategydetail(item.testrecord.id,item.testrecord.strategyid)">{{item.strategyName}}</div>
              </div>
              
              <div style="display:flex;flex-direction:row;">
                <div class="items">
                  <div class="p_f12">策略收益</div>
                  <div class="p_f12" style="text-align: center;font-size:20px;color:black;margin-left:10px">{{item.testrecord.profit}}</div>
                </div>
                <div class="items">
                  <div class="p_f12">实际收益</div>
                  <div class="p_f12" style="text-align: center;font-size:20px;color:black;margin-left:10px">{{item.testrecord.standardprofit}}</div>
                </div>
                <div class="items" style="border: none;width: calc(50% - 2px);">
                  <div class="p_f12">回测时间</div>
                  <div class="p_f12"  style="font-size:20px;color:black;margin-left:10px">{{item.testrecord.starttime}} - {{item.testrecord.endtime}}</div>
                </div>
              </div>
              <div style="height:100px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;">
                <div  style="display:flex;flex-direction:row;margin-left:40px;padding:20px 20px;align-items:center;width:200px;">
                  <img class="portrait" style="margin-right:10px;" :src="item.userInfo.head"/>
                  <div>{{item.userInfo.name}}</div>
                </div>
                <input  
                  style="background: #3c7eee;width: 106px;height: 40px;color: #fff;border: 0;border-radius: 2px;margin-right:40px;"
                  type="button" value="查看详情" @click="gotoStrategydetail(item.testrecord.id,item.testrecord.strategyid)" />
              </div>
            </div>
          </div>
          
          <!-- <div
            class="strategyitem"
            style="display: flex;flex-direction:column;justify-content:center;">
            <div style="width: 100%;">
              <p class="title_p">
                <a>{{selectionStrategyData[0].strategyName}}</a>
              </p>
            </div>
            <div id="chart1" class="strategy_charts" ></div>
            <div style="display: flex;flex-direction: row;">
              <div class="items">
                <p class="p_f12">策略收益</p>
                <p style="text-align: center;">{{selectionStrategyData[0].testrecord.profit}}</p>
              </div>
              <div class="items">
                <p class="p_f12">实际收益</p>
                <p style="text-align: center;">{{selectionStrategyData[0].testrecord.standardprofit}}</p>
              </div>
              <div class="items" style="border: none;width: calc(40% - 2px);">
                <p class="p_f12">回测时间</p>
                <p style="text-align: center;">{{selectionStrategyData[0].testrecord.starttime}}至{{selectionStrategyData[0].testrecord.endtime}}</p>
              </div>
            </div>
            <div style="display: flex;flex-direction:row;justify-content: space-between;margin:10px 28px;">
              <div style="margin-top: 10px;font-size: 14px;"></div>
              <input
                style="background: #3c7eee;width: 106px;height: 40px;color: #fff;border: 0;border-radius: 2px;"
                type="button" value="查看详情" @click="gotoStrategydetail(selectionStrategyData[0].testrecord.strategyid)" />
            </div>
          </div> -->
        </div>
        
      </div>
    </div>
    <!--策略研究平台-->
    <div class="javabox" style="margin-top:50px;display: flex;justify-content:center;align-items:center;">
      <!--<img src="img/java1.png" style="width: 50px;height: 50px;border-radius: 50%;" />-->
      <div>
        <img style="width: 650px;height: 450px;" src="https://yuhuaxia.oss-cn-shanghai.aliyuncs.com/img/celuepingtaitu.png" />
      </div>
      <div style="margin-right: 13%;">
        <h2 style="text-align: center;font-weight: bold; color:#3F4A57;">JAVA策略代码动态编译</h2>
        <div
          style="font-size: 16px;font-weight: 400;margin-top:35px;color: rgba(137, 151, 171, 1);"
        >我们提供百个常用因子和第三方数据库；您可以方便地使用聚宽进行策略研究、历史回测、模拟交易、实盘交易</div>
      </div>
    </div>
    <div
      class="javabox"
      style="background-color:#FFFFFF;margin-top:50px;display: flex;justify-content:center;align-items:center;"
    >
      <!--<img src="img/java1.png" style="width: 50px;height: 50px;border-radius: 50%;" />-->
      <div>
        <h2 style="text-align: center;font-weight: bold; color:#3F4A57;">海量数据动态更新</h2>
        <div
          style="font-size: 16px;font-weight: 400;margin-top:35px;color: rgba(137, 151, 171, 1);"
        >我们提供海量真实有效的实时A股数据，采用python数据爬取，数据实现动态更新，真实有效。</div>
      </div>
      <div>
        <img style="width: 650px;height: 450px;" src="https://yuhuaxia.oss-cn-shanghai.aliyuncs.com/img/shujushuomingtu.png" />
      </div>
    </div>

    <!--策略精选-->
    <div id="scommunity" style="width: 100%;background-color: #0d1c30;color: #FFFFFF;">
      <h2
        style="text-align: center;font-weight: bold; color:#FFFFFF;padding-top:60px;">———————— 社区精选 ————————</h2>
      <div style="display: flex;width: 100%;flex-direction: row;flex-wrap: wrap;">
        <div
          v-for="item in ArticleList"
          :key="item.id"
          style="width: calc((100% - 300px)/3);margin: 60px 30px 60px 60px;"
        >
          <div class="sc_title pointer" >{{item.articleName}}</div>
          <div class="sc_content" >{{item.content}}</div>
          <div style="height: 50px;align-items:flex-end;display: flex;flex-direction: row;" class="pointer">
            <div style="margin-right: 5px;" @click="shequwenzhang(item.id)">查看文章</div>
            <span style="color:#FFFFFF;width:14px;height: 16.8px;" class="glyphicon glyphicon-play"></span>
          </div>
        </div>
      </div>
    </div>
    <footer class="footer">
      <div style="display:flex;flex-direction:row;justify-content:center;align-items:center;">
        <div style="display:flex;flex-direction:row;justify-content:center;margin-right: 50px;">
          <div class="font">关于我们:</div>
          <div class="font">FPS精英团队</div>
        </div>
        <div style="display:inline-block;display:flex;flex-direction:row;justify-content:center;align-items:center;">
          <div style="display: inline-block;" class="font">联系我们：</div>
          <img
            style="display: inline-block;width: 100px;height: 100px;"
            src="../../../static/image/qunliaoerweima.png"
          />
        </div>
      </div>
    </footer>
  </div>
</template>
<style scoped>
.contentmore{
  cursor: pointer;
}
.contentmore:hover{
  color: #337ab7;
  text-decoration:underline;
}
.portrait {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  vertical-align: baseline;
}
.rank{
  width: 80px;
  height: 60px;
  color:#fff;
  font-size:20px;
  font-weight:600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer {
  height: 130px;
  width: 100%;
  background-color: #0d1c30;
  text-align: center;
  padding-top: 17px;
}
.footer span {
  font-size: 15px;
  color: white;
  padding: 0px 60px;
}
.font {
  color: white;
  font-size: 15px;
}
* {
  margin: 0;
  padding: 0;
}
a:hover {
  text-decoration: none;
}
#navigation {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  float: left;
  position: absolute;
  z-index: 2;
}
.navli {
  width: 84px;
  height: 50px;
  text-align: center;
  padding-top: 18px;
}
#logo {
  display: inline;
  padding-top: 18px;
  padding-left: 100px;
}
#navul {
  display: inline;
  opacity: 1;
  padding-right: 100px;
}
.nav-h1 {
  position: absolute;
  top: 30%;
  font-weight: bolder;
  left: 33%;
  z-index: 2;
  color: white;
}
.nav-p {
  position: absolute;
  top: 40%;
  left: 10%;
  z-index: 2;
  color: white;
}
.btngroup {
  position: absolute;
  top: 48%;
  left: 11%;
  z-index: 2;
}

.navli a {
  color: white;
}

.popularcom-list {
  height: 30px;
  margin-left: 120px;
  margin-top: 6px;
}
.popularcom-list a {
  color: #8997ab;
}
.popularcom-list span {
  float: right;
}
#submenu {
  width: 90px;
  margin-top: 20px;
  float: left;
  background-color: white;
  border-radius: 5px;
}
#submenu a {
  line-height: 40px;
  color: #3d495c;
  font-size: 13px;
  opacity: 1;
}
.nav-active {
  color: #8997ab;
}

.strategy {
  width: 100%;
}
.strategy h2 {
  margin-bottom: 30px;
}
.item_title {
  text-align: center;
}
.title_p {
  max-width: calc(100% - 70px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #323f50;
  font-weight: 600;
  font-size: 20px;
  margin: 20px 65px;
}
.title_p a {
  color: #323f50;
}
.items {
  width: calc(25% - 2px);
  font-size: 12px;
  border-right: 1px solid #e8ecf0;
}
.p_f12 {
  font-size:16px;
  font-weight: 500;
  display: block;
  color: #61676e;
  text-align: center;
}
.strategy_charts {
  width: 340px;
  height: 200px;
  margin: 10px 20px;
}
.font {
  color: white;
  font-size: 15px;
}

.javabox {
  width: 100%;
  background-color: #fafafa;
}
.strategychart {
  width: calc((100% - 200px) / 3);
}
.strategyitem {
  color: #61676e;
  box-shadow: 1px 1px 3px 0 rgba(193, 193, 193, 0.55);
  width: 100%;
}
.schart {
  margin: 20px 20px 20px 60px;
  background-color: #ffffff;
  color: #61676e;
  box-shadow: 1px 1px 3px 0 rgba(193, 193, 193, 0.55);
  width: calc(100%/3 - 100px);
}
.sc_title {
  height: 100px;
  width: 100%;
  font-size: 25px;
  font-weight: 600;
}
.sc_content {
  height: 150px;
  width: 100%;
  font-size: 16px;
  font-weight: 400;
}
.pointer{
  cursor: pointer;
}
</style>
<script>
import moment from "moment"
import Vue from 'vue'
export default {
  data() {
    return {
      selectionStrategyData:'',
      ArticleList:'',
      permission:'',
      username:Vue.prototype.$user,
    };
  },
  mounted() {
    if(localStorage.getItem('permission') != null){
      this.permission = localStorage.getItem('permission').split(",")
    }
    this.getselectionStrategyData()
    this.getArticleList()
    // this.$nextTick(function () {
    //   this.drawPiemain1()
    // })
  },
  methods: {
    shequwenzhang (id){
      this.$http.post('article/updateArticleReadingVolume?id='+id+'').then((resp) => {
        if (resp.data.status === 200) {
          console.log(resp.data)
        } else {
          console.log(resp.data)
        }
      })
      localStorage.setItem('communityid', id)
      this.$router.push('/community_detail')
    },
    gotoStrategydetail(id,strategyId){
      this.$router.push('/backtest_detail')
      localStorage.setItem('backtestId',id)
      localStorage.setItem('strategyId',strategyId)
    },
    getselectionStrategyData(){
      // this.$http.get('rank/strategy?count=6').then((resp) => {
      //   if (resp.data.status === 200) {
      //     console.log(resp.data)
      //     this.selectionStrategyData = resp.data.data
      //     // console.log(this.selectionStrategyData)
      //     for(let i = 0;i<this.selectionStrategyData.length;i++){
      //       this.selectionStrategyData[i].testrecord.starttime = moment(new Date(parseInt(this.selectionStrategyData[i].testrecord.starttime))).format("YYYY-MM-DD")
      //       this.selectionStrategyData[i].testrecord.endtime = moment(new Date(parseInt(this.selectionStrategyData[i].testrecord.endtime))).format("YYYY-MM-DD")
      //     }
      //     let a = 0
      //     for(let i=0;i<this.selectionStrategyData[0].profitList.length;i++){
      //       a=this.selectionStrategyData[0].profitList[i].profit+a
      //       this.drawvalue1.push(a)
      //       this.drawdate1.push(this.selectionStrategyData[0].profitList[i].date)
      //     }
      //     // console.log(document.getElementById('chart1'))
      //   } else {
      //     console.log(resp)
      //   }
      // })
      this.$http.get('rank/square?strategyName=&pageSize=6&pageIndex=1').then((resp) => {
        if (resp.data.status === 200) {
          console.log(resp.data)
          this.selectionStrategyData = resp.data.data.list
          for(let i = 0;i<this.selectionStrategyData.length;i++){
            this.selectionStrategyData[i].rank = (i+1)+6*(resp.data.data.pageNum-1)
              this.selectionStrategyData[i].testrecord.starttime = moment(new Date(parseInt(this.selectionStrategyData[i].testrecord.starttime))).format("YYYY-MM-DD")
              this.selectionStrategyData[i].testrecord.endtime = moment(new Date(parseInt(this.selectionStrategyData[i].testrecord.endtime))).format("YYYY-MM-DD")
              if(this.selectionStrategyData[i].userInfo.head === null){
                this.selectionStrategyData[i].userInfo.head = './../../../static/image/默认头像.jpg'
              }
          }
          console
        } else {
          this.$message(resp.data.msg)
        }
      })
    },
    getArticleList(){
      this.$http.get('article/listAllArticlesByVote?pageNum=1&pageSize=6').then((resp) => {
          if (resp.data.status === 200) {
            this.ArticleList = resp.data.data[0].list
            console.log(this.ArticleList)
            for(let i = 0;i<this.ArticleList.length;i++){
              this.ArticleList[i].createTime = moment(new Date(parseInt(this.ArticleList[i].createTime))).format("YYYY-MM-DD hh:mm:ss")
              this.ArticleList[i].content = this.ArticleList[i].content.substring(0,100)+'...'
            }
          } else {
            this.$message(resp.data.msg)
          }
      })
    }
    // drawPiemain1() {
    //   console.log(document.getElementById('chart1'))
    //   this.charts = this.$echarts.init(document.getElementById("chart1"));
    //   this.charts.setOption( {
    //     tooltip: {
    //       trigger: 'axis'
    //     },
    //     legend: {
    //       // data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
    //     },
    //     grid: {
    //       left: '3%',
    //       right: '4%',
    //       bottom: '3%',
    //       containLabel: true
    //     },
    //     toolbox: {
    //       feature: {
    //         saveAsImage: {}
    //       }
    //     },
    //     xAxis: {
    //       type: 'category',
    //       boundaryGap: false,
    //       data: this.drawdate1
    //     },
    //     yAxis: {
    //       type: 'value'
    //     },
    //     series: [
    //       {
    //         type: 'line',
    //         stack: '总量',
    //         data: this.drawvalue1
    //       }
    //     ]
    //   });
    // },
    // drawPiemain2() {
    // },
    // drawPiemain3() {
    // },
    // drawPiemain4() {
    // },
    // drawPiemain5() {
    // },
    // drawPiemain6() {
    // }
  }
};
</script>